<template>
  <div class="carousel-container">
    <el-carousel :interval="5000" arrow="always" height="60vh"> <!-- 高度使用vh自适应 -->
      <el-carousel-item v-for="item in imageUrl" :key="item.url">
        <img :src="item.url" class="carousel-img"/>
      </el-carousel-item>
    </el-carousel>
    <div class="img-box">
      <img src="@/assets/5.png" class="static-img"/>
    </div>
    <!-- 静态图片 -->


    <!-- 在线报价按钮 -->
    <el-button class="buttons" type="primary" @click="router.push('/quotation/print')">在线报价</el-button>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import image1 from "@/assets/1.png";
import image2 from "@/assets/2.png";
import image3 from "@/assets/3.png";
import image4 from "@/assets/4.png";

const router = useRouter();

const imageUrl = [
  {url: image1},
  {url: image2},
  {url: image3},
  {url: image4},
];
</script>

<style scoped>
/* 主容器 */
.carousel-container {
  width: 100%;
  margin: 0 auto; /* 居中 */
  padding: 0 15px; /* 为容器增加内边距，避免图片溢出 */
}

/* 轮播图 */
.carousel {
  position: relative;
  width: 100%; /* 宽度为100%，确保充满容器 */
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片按比例填充容器 */
  border-radius: 10px; /* 圆角效果 */
}
.img-box{
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 静态图片 */
.static-img {
  width: 70%;
  height: auto;
  margin: auto;
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 图片阴影 */
}

/* 按钮样式 */
.buttons {
  width: 20%;
  height: 50px;
  display: block;
  margin: 20px auto;
  font-size: 16px;
  padding: 10px 20px;
  text-align: center;
  border-radius: 30px; /* 圆形按钮 */
  transition: all 0.3s ease-in-out;
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
}

.buttons:hover {
  transform: scale(1.1); /* 悬浮时放大效果 */
  background-color: #45a049; /* 悬浮时按钮颜色变化 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .buttons {
    width: 40%; /* 在较小设备上增大按钮宽度 */
    font-size: 14px;
  }

  .carousel-container {
    padding: 0 10px; /* 调整内边距 */
  }

  .static-img {
    margin-top: 15px; /* 增加图片和按钮的间距 */
  }
}

@media (max-width: 480px) {
  .buttons {
    width: 60%; /* 更小设备上，按钮宽度进一步增大 */
  }
}
</style>
